/*
  jQuery Telephone plugin
	Converts text input fields into three part telephone inputs 

  Author: Gary Weible
  GoogleCode Site:
	
  License:
     The MIT License
*/


( function($){

	$.fn.tel = innertel;
	
	
	function innertel(options)
	{
	
		var settings = { 'separator' : '-',
                      	 'complete' : function(){},
						 'move': function() {},
						 'arearcodewidth' : 33,
						 'firstthreewidth' : 33,
						 'lastfourwidth' : 44
						};
		$.extend(settings,options);
	
		return this.each(function(i,item)
		{
			var jAreacode;
			var jFirstthree;
			var jLastfour;
			var jHiddenField;
		
			jAreacode = $(item);
			var orgval = jAreacode.val();
			if (!(jAreacode.is("input[type='text']")))
			{
				//this is not a text field
				return;
			}
			//save the name of the input
			var tempid = jAreacode.attr('id');
			var tempname = jAreacode.attr('name');
			var tempclass = jAreacode.attr('class');
			var tempstyle = jAreacode.attr('style');
			
			var time = new Date().getTime();
			//create the new input fields
			jHiddenField = $("<input type='hidden' id='" + tempid + "' name='" + tempname + "' />");
			jFirstthree = $("<input type='text' id='" + tempid + "_firstthree_" + time + "' name='" + tempname + "_firstthree_" + time + "' style='" + tempstyle + "' class='" + tempclass + "' />");
			jLastfour = $("<input type='text' id='" + tempid + "_lastfour_" + time + "' name='" + tempname + "_lastfour" + time + "' style='" + tempstyle + "' class='" + tempclass + "' />");
			
			//set the value if it is set
			if (orgval.length == 10)
			{
				jAreacode.val(orgval.substr(0,3));
				jFirstthree.val(orgval.substr(3,3));
				jLastfour.val(orgval.substr(6,4));
				jHiddenField.val(orgval);
			}
			else if (orgval.length == 7)
			{
				jFirstthree.val(orgval.substr(0,3));
				jLastfour.val(orgval.substr(3,4));
				jHiddenField.val(orgval);
			}
			
			//update the visible input field and add the other input fields
			jAreacode.attr('id',tempid + "_areacode_" + time);
			jAreacode.attr('name',tempname + "_areacode_" + time);
			jAreacode.attr('style',tempstyle);
			jAreacode.attr('class',tempclass);
			//set the maxwidth of the textboxes
			jAreacode.attr('maxlength',3);
			jFirstthree.attr('maxlength',3);
			jLastfour.attr('maxlength',4);
			
			jAreacode.css('width', settings['arearcodewidth'] + 'px');
			jFirstthree.css('width', settings['firstthreewidth'] + 'px');
			jLastfour.css('width', settings['lastfourwidth'] + 'px');

			
			//add the necessary events
			jAreacode.keyup(function(evt)
			{
				var val = jAreacode.val();
				if (val.length >= 3)
				{
					if (val.length > 3)
					{
						jAreacode.val(val.substr(0,3));
					}
					settings['move']();
					jFirstthree.focus();
				}
				var val = val + jFirstthree.val() + jLastfour.val();
				jHiddenField.val(val);
			});
			
			
			jFirstthree.keyup(function FirstthreeListener(evt)
			{
				var val = jFirstthree.val();
				if (evt.keyCode == 8)
				{
					if (val.length == 0)
					{
						jAreacode.focus();
						jAreacode.val(jAreacode.val().val.substr(0,2));
					}
				}
				if (val.length >= 3)
				{
					if (val.length > 3)
					{
						jFirstthree.val(val.substr(0,3));
					}
					settings['move']();
					jLastfour.focus();
				}
				val = jAreacode.val() + val + jLastfour.val();
				jHiddenField.val(val);
			});
			
			jLastfour.keyup(function (evt)
			{
				var val = jLastfour.val();
				if (evt.keyCode == 8)
				{
					if (val.length == 0)
					{
						jFirstthree.focus();
						jFirstthree.val(jFirstthree.val().val.substr(0,2));
					}
				}
				if (val.length >= 4)
				{
					if (val.length > 4)
					{
						jLastfour.val(val.substr(0,4));
					}
					settings['complete']();
				}
				var val = jAreacode.val() + jFirstthree.val() + val;
				jHiddenField.val(val);
			});
			
			//add the items in reverse since it adds them ater the areacode text box
			jAreacode.after(jHiddenField);
			jAreacode.after(jLastfour);
			jAreacode.after(settings['separator']);
			jAreacode.after(jFirstthree);
			jAreacode.after(settings['separator']);
			
			
		});
	}

})(jQuery);